<template>
  <div class="login-wrap">
    <el-row type="flex" justify="center">
      <el-col style="margin: 10px">
        <div class="txtTop" style="">
          众唱后台系统管理平台
          <span class="txtTopSmall">Welcome欢迎登录</span>
        </div>
        <div style="width: 100%;text-align: left;">
          <el-radio-group v-model="loginRule.type" @change="change()" style="margin-top: 20px;">
            <el-radio-button label="1" style="margin-right: 20px;padding: 5px;color: #409eff;">平台登录</el-radio-button>
            <el-radio-button label="2" style="margin-right: 20px;border-left: 1px solid #dcdfe6;">KTV商家</el-radio-button>
            <el-radio-button label="3" style="border-left: 1px solid #dcdfe6;">团队管理</el-radio-button>
          </el-radio-group>
        </div>

        <el-form :model="loginRule" :rules="lrule" ref="loginRule" class="demo-ruleForm">
          <el-form-item prop="account" style="border-bottom: 1px solid #C6CCD1;text-align: left;margin-top: 20px;">
            <i class="iconfont iconNMStubiao-" style="font-size: 26px;color: #2694FF;font-weight: bold;"></i>
            <input v-model="loginRule.account" class="logInput"  autocomplete="off"  placeholder="输入账号" />
          </el-form-item>

          <el-form-item prop="pwd" style="border-bottom: 1px solid #C6CCD1;text-align: left;margin-top: 20px;">
            <i class="iconfont iconmima1" style="font-size: 26px;color: #2694FF;font-weight: bold;"></i>
            <input  v-model="loginRule.pwd" class="logInput" style="width: 165px" autocomplete="off" type="password" placeholder="请输入密码" />
          </el-form-item>

          <el-form-item style="text-align: center;margin-top: 20px;">
            <el-button round @click.native="submitForm()" size="medium" style="width: 100%;" type="primary">登录</el-button>
          </el-form-item>
          <el-form-item style="text-align: left">

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>


    <template><span v-loading.fullscreen.lock="fullscreenLoading"></span></template>
  </div>


</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        fullscreenLoading: false,
        loginRule: {
          account: '',
          pwd: '',
          type: '',
        },
        lrule: {
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '请输入登录密码', trigger: 'blur'}
          ],
        },
        checked:false,
      }
    },
    mounted(){
      // if (this.getCookie('user_account') && this.getCookie('user_password')) {
      //   this.loginRule.user_account = this.getCookie('user_account')
      //   this.loginRule.user_password = this.getCookie('user_password')
      //   this.checked = true
      //   console.log('有cookie')
      // }else {
      //   console.log('没有cookie')
      // }
    },
    methods: {
      change(){
        console.log(this.loginRule.type)
      },
      rememberP(){
        if (this.checked == true){
          this.checked = false
        } else {
          this.checked = true
        }
      },
      gohref(name) {
        console.log(name)
        this.$router.push({name: name})
      },
      submitForm(formName) {
        let thi = this
        var a = {
          account: thi.loginRule.account,
          pwd: thi.loginRule.pwd,
          type: thi.loginRule.type,
        }
        console.log(a)
        if (thi.loginRule.account == '' || thi.loginRule.pwd == ''){
          thi.$message({
            message: '缺少账号或密码！',
            type: 'error',
          });
          return false
        }
        // if (thi.checked == true) {
        //   console.log('checked == true')
        //   thi.setCookie('user_account',thi.loginRule.user_account,365)
        //   thi.setCookie('user_password',thi.loginRule.user_password,365)
        // }else {
        //   console.log('checked == false')
        //   thi.clearCookie()
        // }
        thi.fullscreenLoading = true
        thi.$http.post(global.posturl.host + global.posturl.login, a
        ).then(function (response) {
          console.log(response.data)
          var qcode = response.data.code
          var qmsg = response.data.msg
          var qdata = response.data.data
          thi.fullscreenLoading = false
          if (qcode == 200) {

            // thi.$http.defaults.headers.common['mi-token'] = qdata.jwt;
            thi.$store.commit('login', qdata)
            thi.gohref('index')
          } else {
            thi.$message({
              message: qmsg,
              type: 'error',
              duration: 5000
            });
          }
        }).catch(function (error) {
          console.log(error)
        });
      },
      // submitForm(formName) {
      //   let thi = this
      //   thi.gohref('index')
      // },
      // 获取Cookie
      getCookie(name) {
        console.log(name)
        name = name + "="
        var start = document.cookie.indexOf(name),
          value = null;
        if (start > -1) {
          var end = document.cookie.indexOf(";", start);
          if (end == -1) {
            end = document.cookie.length;
          }
          value = document.cookie.substring(start + name.length, end);
        }
        return value;
      },
      //设置cookie
      setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        console.info(cname + "=" + '111' + "; " + expires);
        document.cookie = cname + "=" + cvalue + "; " + expires;
        // "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      },

      //清除cookie
      clearCookie: function() {
        this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
      },
    },
  }
</script>

<style scoped>
  .login-wrap {

  }
  .txtTop{
    margin-top: 50px;
    line-height: 40px;
    font-size: 30px;
    /*color: #279af6;*/
    /*font-weight: lighter;*/
    font-family: '黑体';
    text-align: left;
    letter-spacing: 2px;
  }
  .txtTop .txtTopSmall{
    font-size: 20px;
    color: #AEAEAE;
  }
  .logInput{
    border: none;
    outline: none;
    background-color: rgba(250,250,250,0);
    margin-left: 20px;
    height: 20px;
    font-size: 16px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,1) inset;
    width: 180px;
  }
  input::-webkit-input-placeholder{
    color:#C6CCD1;
  }
  input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#C6CCD1;
  }
  input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#C6CCD1;
  }
  input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#C6CCD1;
  }
</style>
